
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="${root}images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="${root}images/apple-touch-icon.png">
    <title>直播</title>
    <link rel="stylesheet" href="${root}css/seedsui.min.css">
    <style type="text/css">

        .menuwrap-tag:after{
        border-bottom:0px;
        }
    </style>
</head>

<body ontouchstart="">
    <section class="page">
        <header>
            <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()">
            	<img src="${root}img/logo.png" style="width: 24px;height: 24px;" />
            	</a>
            <div class="inputbox bordered" style="margin:0 8px;border-radius: 40px;" data-input="clear">
                <input id="key" style="padding: 2px 8px;" type="search" placeholder="心理直播间" class="search input-text">
                <i id="searchbtn" class="icon size16 icon-search" style="margin-right: 8px;"></i>
            </div>
            <a class="titlebar-button" href="${root}menu">
            	<i class="icon size24 icon-menudot" ></i>
            	</a>
        </div>
        </header>
        <article class="container" style="background-color:white;bottom: 50px;margin-top: 44px;">
           <div class="slider-container" id="carousel1" style="display: none;">
                <div class="slider-wrapper">
                    <!--:for(b in cache.banners!){  -->
                    <div class="slider-slide">
                        <img class="slide-banner" style="height: 150px;" src="${www}${b.img!}"/>
                        <div class="slide-title">
                            
                            <span class="nowrap slide-title-font" style="margin-right: 20px;">
                                ${b.title!}
                            </span>
                        </div>
                    </div>
                    <!--:}  -->
                </div>
                <div class="slider-pagination"></div>
            </div>
            
            
        <div class="inputbox bordered" style="margin:8px;background-color: white;">
            <input type="text" class="input-text text-center" placeholder="选择日历" readonly="readonly" id="ID-Sp"/>
        </div>
        
           <div id="html">
        <!--:for(zb in obj!){  -->
        <div class="bgfilter" onclick="location.href='${root}zb/${zb.id}'" style="position:relative;padding: 8px;overflow:hidden;height:180px;margin-bottom:2px; background-image:url(${www}${zb.img});background-position:center;
        background-size:100% 100%;">
        <p style="color:white; ">${zb.title!}</p>
        <!--:if(date().time>zb.end_time.time){  -->
        <span class="tagline top right" style="background-color: #19a4e5;"><span>回放</span></span>
        <!--:}else if(date().time<zb.start_time.time){  -->
        <span class="tagline top right" style="background-color: #16c447;"><span>未开始</span></span>
        <!--:}else{  -->
        <span class="tagline top right" ><span>正在直播</span></span>
        <!--:}  -->
        </div> 
        <!--:}  -->
        </div>
        </article>
        <footer style="position: fixed;left: 0;bottom: 0;">
		<ul class="tabbar tabbar-footer reverse">
            <li class="tab " onclick="location.href='${root}'">
                <i class="icon icon-home"></i>
                <label class="tab-label">首页</label>
            </li>
            <li class="tab " onclick="location.href='${root}course/cate'" >
                <i class="icon icon-layer"></i>
                <label class="tab-label">课程</label>
            </li>
            <li class="tab" onclick="location.href='${root}vip/'">
                <img src="${root}img/vip/365.png" style="height: 24px;width: 24px;">
                <label class="tab-label">VIP</label>
            </li>
            <li class="tab active" onclick="location.href='${root}zb/'">
                <i class="icon icon-video-fill"></i>
                <label class="tab-label">直播</label>
            </li>
            <li class="tab" onclick="location.href='${root}users/'">
                <i class="icon icon-user"></i>
                <label class="tab-label">我的</label>
            </li>
        </ul>
	</footer>
    </section>
    <script src="${root}assets/third/jquery/jquery-2.1.3.min.js"></script>
    <script src="${root}js/seedsui.min.js"></script>
    <script src="${root}js/date.js"></script>
    <script>
    var view={
            /*=========================
              Model
              ===========================*/
            initialize:function(){
                /*DOM*/
                this.textSp=document.getElementById("ID-Sp");

                /*Plugin*/
                this.picker={};
                this.picker.hasEvent=false;
                this.spdata1=[
                    {'key':'year','value':'2017'},
                    {'key':'year','value':'2016'},
                ];
                this.spdata2=[
                    {'key':'month','value':'01'},
                    {'key':'month','value':'02'},
                    {'key':'month','value':'03'},
                    {'key':'month','value':'04'},
                    {'key':'month','value':'05'},
                    {'key':'month','value':'06'},
                    {'key':'month','value':'07'},
                    {'key':'month','value':'08'},
                    {'key':'month','value':'09'},
                    {'key':'month','value':'10'},
                    {'key':'month','value':'11'},
                    {'key':'month','value':'12'},
                ];

                /*Data*/

                /*Render*/
                this.render();
                
                /*Events*/
                this._attach();
            },
            render:function(){
                this._initPlugin();
            },
            /*=========================
              Plugin
              ===========================*/
            _initPicker:function(){
                var self=this;
                this.picker=new Picker({
                    // parent:"article",
                    onInit:function(e){
                        console.log("初始化");
                    },
                    onClickDone:function(e){
                        //获得全部选中项
                        var activeText="";
                        e.activeOptions.forEach(function(n,i,a){
                            if(i==e.activeOptions.length-1){
                                activeText+=n["value"];
                            }else{
                                activeText+=n["value"]+"-";
                            }
                        });
                        self.textSp.value=activeText;
                        e.hide();
                        console.log("点击完成"+activeText);
                        if(activeText!=""){
                        	
                        	$("#html").load("${root}zb/list?date="+activeText,{},function(result){
                		  	});
                        }
                    },
                    onClickCancel:function(e){
                        //e.updateSlots();
                        e.hide();
                    },
                    onScrollEnd:function(e){
                        //获得当前选中项
                        console.log("滚动结束");
                        // console.log("滚动槽："+e.activeSlot.index);
                        // console.log("滚动槽值："+e.activeSlot.values);
                        // console.log("选中项数："+e.activeSlot.activeIndex);
                        // console.log("全部选中项："+e.activeOptions);
                    },
                    onShowed:function(e){
                        console.log("已显示");
                    },
                    onHid:function(e){
                        console.log("已隐藏");
                    }
                });
            },
            _addPickerData:function(){
                this.picker.addSlot(this.spdata1,'d');//数据,默认key,样式
                this.picker.addSlot(this.spdata2);
            },
            _initPlugin:function(){
                this._initPicker();
                this._addPickerData();
            },
            /*=========================
              Events
              ===========================*/
            _attach:function(e){
                var self=this;
                this.textSp.addEventListener("click",function(e){
                    self._onClickTextSp(e);
                },false);
            },
            /*=========================
              Event Handler
              ===========================*/
            _onClickTextSp:function(e){
                this.picker.show();
            }
        }

        window.addEventListener("load",function(){
            view.initialize();
        }, false);

    	
    	function back(){history.go(-1);}
</script>
</body>
</html>